<template>
    <el-row :gutter="10">
        <el-col v-for="o in 4" :key="o" :span="6"><el-card class="card" :body-style="{ padding: '20px' }">
                <div class="img_header">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image" />
                    <span class="left_text">完结</span>
                    <span class="right_text">1.0</span>
                </div>

                <div class="info" style="padding: 14px">
                    <span class="info_title">那山那海</span>
                    <p class="info_desc">讲述了各族邻里居平易近之间的...</p>
                </div>

            </el-card></el-col>
    </el-row>
</template>
  

<script  setup>
// import { ref } from 'vue'

</script>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.card {


    &:hover{
        color: #ff5f00;
    }

    .img_header {
        position: relative;


        .left_text {
            color: antiquewhite;
            position: absolute;
            bottom: 5px;
            left: 10px;
            font-weight: bold;

        }


        .right_text {
            color: #ff1500;
            position: absolute;
            bottom: 5px;
            right: 10px;
            font-weight: bold;
        }
    }

    .info {
        .info_title {
            font-size: 18px;
            font-weight: bold;
        }

        .info_desc {
            font-size: 14px;
            color: #666;


            display: block;
            /*内联对象需加*/
            word-break: keep-all;
            /* 不换行 */
            white-space: nowrap;
            /* 不换行 */
            overflow: hidden;
            /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis;
            /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
        }
    }
}
</style>
  